<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>消息列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <!-- px转rem js -->
    <script type="text/javascript" src="../script/lib-flexible.js"></script>
    <style>
        html,
        body {
            background-color: #ededed;
        }

        .middle {
            position: relative;
            margin-bottom: .11rem;
            height: 1.07rem;
            border-radius: .07rem;
            background-color: #fff;
        }

        .middle img {
            height: .53rem;
            padding: .27rem;
        }

        .left_img {
            position: absolute;
            left: 0;
            z-index: 999;
        }

        .right_img {
            position: absolute;
            right: 0;
            z-index: 999;
            display: none;
        }

        .middle>input {
            height: 1.07rem;
            line-height: 1.07rem;
            color: #333;
            font-size: .32rem;
            outline: none;
            width: 100%;
            margin: 0 1.07rem;
        }

        .list {
            overflow: hidden;
        }

        .list .item {
            height: 1.76rem;
            background-color: #fff;
            position: relative;
            -webkit-transform: translateX(0px);
            transition: transform 0.2s;
            -webkit-transition: transform 0.2s;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .list .item .swiper-li {
            display: block;
            height: 1.76rem;
            line-height: 1.76rem;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
            color: inherit;
            padding: 0 .42rem;
        }

        .left-img {
            position: relative;
            height: 1.76rem;
            width: 1.33rem;
            line-height: 1.76rem;
            margin-right: .4rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .left-img img {
            height: 1.33rem;
            width: 1.33rem;
            border-radius: 50%;
        }

        .left-img .badge {
            position: absolute;
            z-index: 99;
            top: .14rem;
            right: -.2rem;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            min-width: .5rem;
            height: .5rem;
            line-height: .5rem;
            font-size: .25rem;
            color: #fff;
            border-radius: 50%;
            background-color: #ff2600;
            text-decoration: none;
        }

        .center-name {
            font-size: .4rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: .54rem;
            margin-top: .3rem;
            margin-bottom: .1rem;
            position: relative;
        }

        .center-body {
            font-size: .33rem;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: .54rem;
        }

        .center-body>span {
            color: #FD2626;
            margin-right: .14rem;
        }

        .center-body img {
            height: .45rem;
            width: .45rem;
            vertical-align: middle;
        }

        .right-time {
            padding-top: .3rem;
            font-size: .33rem;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: .54rem;
        }

        .settop {
            position: absolute;
            right: -1.78rem;
            bottom: 0;
            width: 1.78rem;
            line-height: 1.78rem;
            height: 1.78rem;
            text-align: center;
            background: #adadad;
            color: #fff;
            font-size: .42rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            font-style: normal
        }

        .dell {
            position: absolute;
            right: -3.56rem;
            bottom: 0;
            width: 1.78rem;
            line-height: 1.78rem;
            height: 1.78rem;
            text-align: center;
            background: #F63746;
            color: #fff;
            font-size: .42rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            font-style: normal
        }

        .border-1px-bottom:last-child::after {
            border: 0px;
        }
    </style>
</head>

<body>
    <div class="list" v-cloak>
        <!-- <div class="middle flex-wrap">
                <img class="left_img" src="../image/icon/icon_search.png" @click="fnSearch();" />
                <input id="searchText" type="text" placeholder="搜索消息" v-on:input="fnInput();" />
                <img id="clear" class="right_img" src="../image/login/icondelete.png" @click="fnClear();" />
        </div> -->
        <div class="item border-1px-bottom" v-for="(lists,index) in list">
            <div class="swiper-li">
                <div class="flex-wrap" @click="fnOpenChat(lists.conversationId,lists.type,lists.latestMessage.messageId,lists.unreadMessagesCount,index);">
                    <div class="left-img">
                        <!-- src="../image/defaults/default_pic.png" -->
                        <img v-bind:src="lists.img" v-bind:alt="lists.name" />
                        <div class="badge" v-if="lists.unreadMessagesCount>0&&lists.unreadMessagesCount<99">{{lists.unreadMessagesCount}}</div>
                        <div class="badge" v-if="lists.unreadMessagesCount>99">{{lists.unreadMessagesCount}}+</div>
                    </div>
                    <div class="flex-con">
                        <div class="center-name">
                            {{lists.conversationId}}
                        </div>
                        <div class="center-body ellipsis-1" v-html="fnType(lists.latestMessage.body.type,index)"></div>
                    </div>
                    <div class="right-time">
                        {{lists.latestMessage.localTime|formatTime}}
                    </div>
                </div>
                <div class="btn">
                    <div class="settop" @click="fnSetTop(index);">
                        置顶
                    </div>
                    <div class="dell" @click="fnDell(index);">
                        删除
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="item border-1px-bottom">
            <div class="swiper-li">
                <div class="flex-wrap" @click="fnOpenChat('王宝宝',2);">
                    <div class="left-img">
                        <img src="../image/test/test_wbq.png" alt="" />
                        <div class="badge">11</div>
                    </div>
                    <div class="flex-con">
                        <div class="center-name">王宝宝</div>
                        <div class="center-body ellipsis-1">[图片]</div>
                    </div>
                    <div class="right-time">
                        昨天 9:13
                    </div>
                </div>
                <div class="btn settop" @click="fnSetTop();">置顶</div>
                <div class="btn dell" @click="fnDell();">删除</div>
            </div>
        </div>
        <div class="item border-1px-bottom">
            <div class="swiper-li">
                <div class="thum flex-wrap" @click="fnOpenChat('宋记',2);">
                    <div class="left-img">
                        <img src="../image/test/test_sj.png" alt="" />
                        <div class="badge">11</div>
                    </div>
                    <div class="flex-con">
                        <div class="center-name">宋记</div>
                        <div class="center-body ellipsis-1"><span>[草稿]</span>有空来一下</div>
                    </div>
                    <div class="right-time">
                        昨天 9:13
                    </div>
                </div>
                <div class="btn settop" @click="fnSetTop();">置顶</div>
                <div class="btn dell" @click="fnDell();">删除</div>
            </div>
        </div>
        <div class="item border-1px-bottom">
            <div class="swiper-li">
                <div class="thum flex-wrap" @click="fnOpenChat('码融',3);">
                    <div class="left-img">
                        <img src="../image/test/test_mr.png" alt="" />
                        <div class="badge">11</div>
                    </div>
                    <div class="flex-con">
                        <div class="center-name">码融</div>
                        <div class="center-body ellipsis-1">[语音]</div>
                    </div>
                    <div class="right-time">
                        昨天 9:13
                    </div>
                </div>
                <div class="btn settop" @click="fnSetTop();">置顶</div>
                <div class="btn dell" @click="fnDell();">删除</div>
            </div>
        </div> -->
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../script/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../script/SHA1.js"></script>
<!-- 滑动 -->
<script type="text/javascript" src="../script/swiper.js"></script>
<!-- 表情转换js -->
<script type="text/javascript" src="../script/emotion.js"></script>
<script type="text/javascript">
    var eClear, eSearchText, eSearchTextval;
    apiready = function() {
        // 初始化vue
        fnInitVue();
    };

    function fnInitVue() {
        window.ListVue = new Vue({
            el: '.list',
            data: {
                list: []
            },
            mounted: function() {
                this.$nextTick(function() {
                    // 初始化数据
                    fnInit();
                    // 初始化下拉刷新
                    fnsetRefreshHeaderInfo();
                    //环信会话接口请求
                    fnGetAllConversations();
                });
            },
            methods: {
                //搜索按钮
                fnSearch: function() {

                },
                //监听输入框
                fnInput: function() {
                    // 获取输入框内容变化
                    eSearchTextval = $api.val(eSearchText);
                    if (eSearchTextval != "") {
                        eClear.style.display = "block";
                    } else {
                        eClear.style.display = "none";
                    }
                },
                //清空输入框
                fnClear: function() {
                    $api.val(eSearchText, "");
                    eClear.style.display = "none";
                },
                //打开聊天窗口
                fnOpenChat: function(conversationid, type, messageid, number, index) {
                    api.openWin({
                        name: 'chat',
                        url: './chat/chat_win.html',
                        slidBackEnabled: true,
                        pageParam: {
                            conversationid: conversationid,
                            type: type,
                            messageid: messageid,
                        }
                    });
                    setTimeout(function() {
                        if (number > 0) {
                            window.ListVue.list[index].unreadMessagesCount = 0;
                        };
                        // 点击消除对应最消息数
                        fnMarkAllMessagesAsRead(conversationid, type);
                        //获取储存的总消息数
                        var eTotal = $api.getStorage('unread_total');
                        // 总消息数减去点击对应的消息数  得到剩余的消息数_result
                        var _result = eTotal - number;
                        // 刷新一下main导航下的消息数
                        if (_result >= 0) {
                            api.execScript({
                                name: 'main',
                                script: 'fnNewsBadge(' + _result + ');'
                            });
                        }
                    }, 200)
                },
                fnSetTop: function(index) {
                    console.log("置顶" + index);
                },
                fnDell: function(index) {
                    console.log("删除" + index);
                }, // 显示转换
                fnType: function(types, index) {
                    //text：文本类型
                    //image：图片类型
                    //video：视频类型
                    //location：位置类型
                    //voice：语音类型
                    //file：文件类型
                    if (types == "text") {
                        if (window.ListVue.list[index].latestMessage.body.text == '' || window.ListVue.list[index].latestMessage.body.text == undefined) {
                            return;
                        }
                        msg = window.ListVue.list[index].latestMessage.body.text;
                        var emotionObj = emotion;
                        var regx = /\[(.*?)\]/gm;
                        var translateMSg = window.ListVue.list[index].latestMessage.body.text.replace(regx, function(math) {
                            var imgSrc = emotionObj[math];
                            if (!imgSrc) {
                                return math;
                            }
                            var img = '<img src="../res/img/emotion/' + imgSrc + '.png" class="emotion">'
                            return img;
                        })
                        console.log(translateMSg)
                        return translateMSg;
                    }
                    if (types == "voice") {
                        return "[语音]";
                    }
                    if (types == "image") {
                        return "[图片]";
                    }
                    if (types == "video") {
                        return "[视频]";
                    }
                    if (types == "location") {
                        return "[位置]";
                    }
                    // if (c.draft) {
                    //     c.latestMessage.text = '[草稿] ' + c.draft;
                    // }
                    // var typeMap = {
                    //     'RC:TxtMsg': '[文本]',
                    //     'RC:VcMsg': '[语音]',
                    //     'RC:ImgMsg': '[图片]',
                    //     'RC:ImgTextMsg': '[图文]'
                    // }
                    // return
                    // return c.objectName == 'RC:TxtMsg' ? c.latestMessage.text : typeMap[c.objectName];
                }
            },
            filters: {
                // 时间转换
                formatTime: function(v) {
                    return new Date(v).popular();
                }

            }
        })
    }

    //打开滑动删除特效
    // fntouch(3.56);

    function fnInit() {
        //获取清除按钮
        eClear = $api.byId('clear');
        //获取输入框
        eSearchText = $api.byId('searchText'); //输入框
    }

    function fnsetRefreshHeaderInfo() {
        api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            api.refreshHeaderLoadDone();
            if (ret) {
                fnGetAllConversations();
            } else {
                toast("公共卫生：" + err.msg);
            }
        });
    }

    // 将环信获取的会话消息渲染出
    function fnRequestList(data) {
        console.log(JSON.stringify(data.conversations))
        if (data.conversations.length > 0) {
            window.ListVue.list = data.conversations;
        } else {
            toast("公共卫生：暂无会话消息");
        }
        // window.ListVue.list = [{
        //     "id": 0,
        //     "img": "../image/test/test_wbq.png",
        //     "time":
        //     1542512930114,
        //     "badge": 2,
        //     "name": "王宝宝",
        //     "body": "你现在有空吗",
        //     "type": "0",
        // }, {
        //     "id": 1,
        //     "img": "../image/test/test_mr.png",
        //     "time": 1542616930134,
        //     "badge": 3,
        //     "name": "马荣",
        //     "body": "周六去吃烧烤罗",
        //     "type": "1",
        // }, {
        //     "id": 2,
        //     "img": "../image/test/test_sj.png",
        //     "time": 1542422930114,
        //     "badge": 4,
        //     "name": "宋记",
        //     "body": "我现在坐牢了，给我送点洗漱用品",
        //     "type": "2",
        // }, {
        //     "id": 3,
        //     "img": "../image/test/test_lyf.png",
        //     "time": 1522122930114,
        //     "badge": 4,
        //     "name": "罗瑜疯",
        //     "body": "我中了一亿啊，分你五千万",
        //     "type": "3",
        // }, {
        //     "id": 4,
        //     "img": "../image/test/test_xz.png",
        //     "time": 1532122930114,
        //     "badge": 5,
        //     "name": "许症",
        //     "body": "我新剧马上在元旦播出，邀请您来观影",
        //     "type": "3",
        // }]
    }
</script>

</html>
